<template>
    <el-breadcrumb separator="/" style="margin-top: 10px;background-color: #fff;
    padding: 20px;border-radius: 10px;">
        <el-breadcrumb-item to="/">主页</el-breadcrumb-item>
        <el-breadcrumb-item :to="currentPath.path">{{ currentPath.meta.name
            }}</el-breadcrumb-item>
    </el-breadcrumb>
</template>

<script setup>

import { useRoute, useRouter } from 'vue-router'
import { ref, watch } from 'vue'
import routes from '../router/index'

const currentPath = ref(null)

const route = useRoute()
watch(() => route, (val) => {
    currentPath.value = routes.filter(item => val.path === item.path)[0]
}, {
    deep: true,
    immediate: true
})

</script>